<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>湖南省自来水公司营销管理信息系统</title>

	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="../css/custom.css"  media="screen" title="no title">
	<link href="../css/bootstrap-iso.css" type="text/css" rel="stylesheet">
	<script src="../js/jquery/jquery-3.3.1.js"></script>
	<script src="/webjars/vue/2.5.17/dist/vue.js"></script>

	<script src="../js/bootstrap.min.js"></script>
	<script src="../layui/layui.all.js" type="text/javascript" ></script>
</head>

<body>

<div id="wrapper">



	<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>

	<div id="tab">
	<div id="content" class="xgrid">

		<div class="x12">

			<div id="facebox_delete" style="display: none">
				<div style="height:80px;text-align:center;padding-top:50px;">
					确认删除吗？
				</div>

				<div class="dialogbutton center">
					<a class="btn" href="javascript:deletethis();" style="width:60px;">是</a>
					<a class="btn btn-grey" href="javascript:closeDialog();" style="width:60px;">否</a>
				</div>
			</div>

			<div id="facebox_setVolume" style="display: none">
				<div id="facebox_setVolume_message" style="height:80px;text-align:center;padding-top:50px;">
					确认移动到此表册吗？
				</div>

				<div class="dialogbutton center">
					<a class="btn" href="javascript:move(this);" style="width:60px;">是</a>
					<a class="btn btn-grey" href="javascript:closeDialog();" style="width:60px;">否</a>
				</div>
			</div>
	<script>
		function move(obj) {
		location.href="javascript:closeDialog()";
		tab.updatevolume();
		}
		function deletethis(){
			location.href="javascript:closeDialog()";
			tab.deletevol();
		}
	</script>
				<table id="parent_table">
					<tr>
						<td width="30%">
							<h2>表册管理</h2>

							<p>
								<br/>
							<div style="float:left;height:42px;">
								<button class="btn-icon btn-plus" onClick="location='rd_volume_add.html';"><span></span>添加表册</button>
							</div>
							</p>

							<table class="data display">
								<thead>
								<tr>
									<th>未分配表册的用户</th>
									<th></th>
								</tr>
								</thead>
								<tbody>
								<tr class="odd gradeX">
									<td><a onclick="queybynull()">未分配表册的用户</a></td>
									<td class="right">&nbsp;</td>
								</tr>
								</tbody>
							</table>
							<script>
								function queybynull(){
									$("#volumenameTitle").html("未分配");
									tab.users.volumeID=0;
									tab.querybylike();
								}

							</script>
							<table class="data display" v-for="a in area">
								<thead>
								<tr>
									<th v-text="a.areaName"></th>
									<th></th>
								</tr>
								</thead>
								<tbody>
								<tr class="odd gradeX" v-for="v in volume" v-if="a.id==v.areaID">
									<td><a @click="queybyvolume(v.id,v.volumeName)">{{v.volumeName}}</a></td>
									<td class="right" v-if="v.disabled==0">
										<a :href="'rd_volume_add.html?id='+v.id+'&&vname='+v.volumeName+'&&vmark='+v.remark+''">[修改]</a>
										<a href="#" @click="alertfacebox(v.id)"  rel="facebox">[删除]</a>
									</td>
									<td class="right" v-if="v.disabled==1">
										<span>已禁用</span>
									</td>
								</tr>
								</tbody>
							</table>
						</td>
						<td width="1%">&nbsp;</td>
						<td width="69%">
							<h2><span id="volumenameTitle"></span>表册的用户</h2>

							<div style="float:left;width:150px">
								<select style="width:90px" id="selectsize" @change="querybylike()">
									<option value="10" selected>10</option>
									<option value="30">30</option>
									<option value="100">100</option>
								</select>
							</div>
							<div style="float:right;">
								分配至
								<select id="select_area" class="medium" onchange="alertvolume()"  >
									<option selected="selected" value=''>请选择</option>
									<option value="0">未分配</option>
									<optgroup :label="a.areaName" v-for="a in area">
										<option v-for="v in volume" v-if="a.id==v.areaID" :value="v.id">{{v.volumeName}}</option>
									</optgroup>
								</select><br>
								<script>
									function alertvolume(){
										bool=true;
										var areaText = $('#select_area').val();
										if(areaText==''){
											bool=true;
											return;
										}
										if(areaText=='0') {
											$('#facebox_setVolume_message').text('确认将选择的用户变成未分配表册的用户吗？');
											$.facebox({div:'#facebox_setVolume'});
											bool=false;
										}else{
											$('#facebox_setVolume_message').text('确认将选择的用户分配到表册【'+areaText+'】中吗？');
											$.facebox({div:'#facebox_setVolume'});
											bool=false;
										}

									}
								</script>

								搜索：<input type="text" v-model="users.username"   @keyup.enter="querybylike()" ><br>

							</div>
							<table class="data display ">
								<thead>
								<tr>
									<th>&nbsp;</th>
									<th>排序号</th>
									<th>用户编码</th>
									<th>表身码</th>
									<th>用户姓名</th>
									<th>地址</th>
								</tr>
								</thead>
								<tbody id="check">
								<tr class="odd gradeX" v-for="(u,index) in user">
									<td><input type="checkbox" :value="u.userno" v-model="checkval" /></td>
									<td v-if="u.volumeOrderIndex==null"><a @click="checkVolume(u.volumeID,u.userno)">未分配</a></td>
									<td v-if="u.volumeOrderIndex!=null"><a @click="checkVolume(u.volumeID,u.userno)">{{u.volumeOrderIndex}}</a></td>
									<td v-text="u.userno"></td>
									<td>{{u.meterID}}</td>
									<td>{{u.username}}</td>
									<td>{{u.address}}</td>
								</tr>
								</tbody>
								<tr>
									<td colspan="6">
										<div class="bootstrap-iso">
											<!--分页-->
											<!--显示分页信息-->
											<div class="bootstrap-iso row" v-if="pageInfo.pages!=0">
												<!--文字信息-->
												<div class="col-md-6">
													当前第 <input name="startPage"  :value="pageInfo.current"  style="width: 20px"/>/{{pageInfo.pages}}页.一共 {{pageInfo.total}}条记录
												</div>
												<!--点击分页-->
												<div class="col-md-6">
													<nav aria-label="Page navigation">
														<ul class="pagination">
															<li><a href="javascript:;" @click="query()">首页</a></li>
															<!--上一页-->
															<li>
																<a :class="{'hidden':pageInfo.current==1}" href="javascript:;" @click="query(pageInfo.current-1)" aria-label="Previous">
																	<span aria-hidden="true">«</span>
																</a>
															</li>

															<li>
																<a :class="{'hidden':pageInfo.current==pageInfo.pages}" href="javascript:;" @click="query(pageInfo.current+1)"
																   aria-label="Next" >
																	<span aria-hidden="true">»</span>
																</a>
															</li>
															<li><a href="javascript:;" @click="query(pageInfo.pages-0)">尾页</a></li>
														</ul>
													</nav>
												</div>
											</div>
											<!--分页结束-->
											<div style="text-align: center" v-if="pageInfo.pages==0">没有数据</div>
										</div>
									</td>
								</tr>
							</table>
			</td>
			</tr>
			</table>

		</div> <!-- .x12 -->

	</div> <!-- #content -->
		</div>



	<script>
		var tab=new Vue({
			el:"#tab",
			data:{
				user:"",
				pageInfo:"",
				users:{
					current:"",
					username:"",
					address:"",
					volumeID:"",
					size:"",
				},
				area:"",//辖区
				volume:"",//列表
				checkval:[],//复选框
				order:{
					userno:"",
					volumeOrderIndex:"",
				},
				delId:'',
			},
			methods:{
				//分页查询
				query(current){
					this.users.current=current;
					$.get("/us-user/queryAlllwt",tab.users,function(json){
						tab.user=json.data.page.records;
						tab.pageInfo=json.data.page;

					})

				},
				//模糊查询
				querybylike:function(event){
					this.users.size=$("#selectsize").val();
					//this.users.address=event.target.value;
					this.users.current=1;
					$.get("/us-user/queryAlllwt",tab.users,function(json){
						tab.user=json.data.page.records;
						tab.pageInfo=json.data.page;
					})
				},
				//通过表册查询用户
				queybyvolume(value,name){
					$("#volumenameTitle").html(name);
				tab.users.volumeID=value;
					this.querybylike();
				},

				//将用户分配表册
				updatevolume(){
					var sel = $('#select_area').val();
					$.get("/rd-volume/updatevolumeId",{"checkval":tab.checkval.toString(),"volumeID":sel},function(data){
						if(data.code=="200"){
							alert("分配成功啦")
							tab.querybylike();
							$('#select_area').val('');
						}else{
							alert("失败了");
						}
					});

				},
				//查询用户是否已分配到表册
				checkVolume(volume,userno){
					if(volume==0){
						alert("请先分配表册");
						return false;
					}else{
						tab.show(userno,volume)
					}
				},

				show(value,volume){
					tab.order.userno=value;
					var w = ($(window).width() * 0.25);
					var h = ($(window).height() - 250);
					var str="";
					layer.open({
						resize: false,
						title: '预览',
						shadeClose: true,
						area: [w + 'px', h + 'px'],
						type: 2,
						content: '../lwt/volumeOrderIndex.html',
						btn: ['确定', '关闭'],
						yes: function (index, obj) {
							///当点击‘确定’按钮的时候，获取弹出层返回的值
							 var res = window["layui-layer-iframe" + index].show();
							// //打印返回的值，看是否有我们想返回的值。
							// alert(res);
							//     console.log(res);
							//最后关闭弹出层
							layer.close(index);
						},
						success: function (layero, index) {
							var body = layer.getChildFrame('body', index);
							str = body.find('button').html();
						}
					});
				},

				show1(value){
					if(value==""){
						return false;
					}
					 tab.order.volumeOrderIndex=value;
					 //修改在表册中的序号
					$.post("/rd-volume/updatevolumeOrderIndex",tab.order,function(code){
							if(code>0){
								alert("修改成功");
								return true;
							}else{
								alert("修改失败");
								return false;
							}
					});
					// if(value1==tab.vid){
					// 	alert("序号已存在");
					// 	return false;
					// }else{
					// 	alert("success");
					// 	$.put("",{"volumeID":value},function(){
					//
					// 	})
					// 	return true;
					// }

				},
				//弹出删除框
				 alertfacebox(val) {
			$.facebox({div:'#facebox_delete'});
			tab.delId=val;
		},

				deletevol(){
					$.ajax({
						type: "DELETE",
						url: "/rd-volume/deleteVolume",
						data: "id="+tab.delId,
						success: function(){
							location.reload();
						}
					});
				}
			},
			created(){
				//页面加载查询所有
				$.getJSON("/us-user/queryAlllwt",function(json) {
					tab.user=json.data.page.records;
					tab.pageInfo=json.data.page;
				})
				//查询辖区
				$.getJSON("/SyArea/queryall",function(json){
					tab.area=json;
				});
				//查询表册
				$.getJSON("/rd-volume/queryall",function(json){
					tab.volume=json.data.list;
				});

			},

		});
	</script>
	<div id="footer">
		<div class="content_pad">
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->

</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">

	$(document).ready ( function ()
	{
		Dashboard.init ();


		$('.datatableVolume').dataTable({
			bSort : false,                //不允许排序
			aLengthMenu : [[20, 50, 100, -1], [20, 50, 100, '显示所有']],  //分页器可选值
			iDisplayLength : 20           //默认情况下，一页显示多少条
		});

	});

	//设置用户所属表册
	function setVolume(){

		//
		var areaText = $('#select_area').val();
		if(areaText=='')return;
		if(areaText=='未分配'){
			$('#facebox_setVolume_message').text('确认将选择的用户变成未分配表册的用户吗？');
			$.facebox({div:'#facebox_setVolume'});
		}else{
			$('#facebox_setVolume_message').text('确认将选择的用户分配到表册【'+areaText+'】中吗？');
			$.facebox({div:'#facebox_setVolume'});
		}
	}



</script>

</body>

</html>